@font-face {
    font-family: 'OpenSansLight';
    src: url('../font/OpenSans-Light-webfont.eot');
    src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Light-webfont.woff') format('woff'),
         url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face{ 
font-family:"alphotoshop";
src: url('fonts/alphotoshop/alphotoshop.eot'); 
src: 
url('fonts/alphotoshop/alphotoshop.eot@#iefix') format('embedded-opentype'), 
url('fonts/alphotoshop/alphotoshop.woff') format('woff'), 
url('fonts/alphotoshop/alphotoshop.ttf') format('truetype'), 
url('fonts/alphotoshop/alphotoshop.svg#webfont') format('svg'); 
}
@font-face{ 
font-family:"Lane_Narrow";
src: url('fonts/lane_narrow_regular/lanenar_-webfont.eot'); 
src: 
url('fonts/lane_narrow_regular/lanenar_-webfont.eot@#iefix') format('embedded-opentype'), 
url('fonts/lane_narrow_regular/lanenar_-webfont.woff') format('woff'), 
url('fonts/lane_narrow_regular/lanenar_-webfont.ttf') format('truetype'), 
url('fonts/lane_narrow_regular/lanenar_-webfont.svg#webfont') format('svg'); 
}
@font-face{ 
font-family:"Ostrich_Sans_Black";
src: url('fonts/ostrich_sans_black/ostrich_black-webfont.eot'); 
src: 
url('fonts/ostrich_sans_black/ostrich_black-webfont.eot@#iefix') format('embedded-opentype'), 
url('fonts/ostrich_sans_black/ostrich_black-webfont.woff') format('woff'), 
url('fonts/ostrich_sans_black/ostrich_black-webfont.ttf') format('truetype'), 
url('fonts/ostrich_sans_black/ostrich_black-webfont.svg#webfont') format('svg'); 
}
.tz_demo {	
	display: block;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: hidden;  
	position: fixed;
    top: 0;
    width: 100%;
}
.tz_demo div.span4{		
	text-align: center;	
	height: 100%;
	border-left: 5px solid #000000;
	margin: 0;	
	overflow: hidden;	
}
.tz_demo div.span4:hover img{
	transition: all 500ms linear 0ms;
	-moz-transition: all 500ms linear 0ms; /* Firefox 4 */
	-webkit-transition: all 500ms linear 0ms; /* Safari and Chrome */
	-o-transition: all 500ms linear 0ms; /* Opera */	
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
}

.tz_demo img{
	max-width: none;
	position: relative;
	z-index: -999;
	visibility: visible;
}
.overlay {
	background: url("../img/dot.png") repeat scroll 0 0 transparent;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: -10;
}

.tz_demo div.span4 div{	
	position: absolute;
    text-align: center;
    bottom: 35%;
    width: 25%;
	padding: 25px 0;
	text-transform: uppercase;
	font-family:"Ostrich_Sans_Black";
	font-size: 24px;
	opacity: 0.8;
}

.tz_demo div.span4 div.dark{	
	background: rgb(0, 0, 0);
	color: #ffffff;
}

.tz_demo div.span4 div.surf{	
	background: rgb(0, 0, 0);
	color: #ffffff;

}

.tz_demo div.span4 div.light{	
	background: rgb(0, 0, 0);
	color: #FFFFFF;
}

@media (max-width: 767px) {
	body {
		padding: 0;
	}
	.tz_demo {	
		display: block;		
		margin: 0;		 
		position: relative;
		width: 100%;
	}	
	.tz_demo div.span4{	
		position: relative;
		height: 480px;
	}
	.tz_demo div.span4 div{	
		display: inline-block;
		width: 100%;		
		bottom:0;
		left: 0;
		vertical-align: middle;
		font-size: 18px;
		padding: 18px 0;
		opacity: 0.8;
	}
}

@media (max-width: 480px) {
	.tz_demo div.span4{	
		position: relative;
		height: 320px;
	}
}